<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
</head>
<body>
    <div id="app">
        <h1>普通数组 数组直接动下标 不会更新</h1>

        <button @click="fruits.push('菠萝')">增</button>
        <button @click="fruits.pop()">删</button>
        <button @click="fruits.splice(2,1,'榴莲')">改</button>

        <ul>
            <li v-for="f,i in fruits" :key='f'>
              {{i}}  {{f}}
            </li>
        </ul>

        <h1> 循环 JSON</h1>

        <button @click="heros.push({id:4,cname:'格温',ename:'内瑟斯'})">增</button>
        <button @click="heros.pop()">删</button>
        <button @click="heros.splice(2,1,{id:3,cname:'亚托克斯',ename:'亚索'})">改</button>

        <ul>
            <li v-for="h,i in heros" :key='h'>
                {{i}}
                {{h.cname}},
                {{h.ename}},
                {{h}}
            </li>
        </ul>


        <h1>循环对象</h1>
        <p v-for="v,k,i in student">
            {{i}}--{{k}}--{{v}}
        </p>


    </div>

    <h1>练习</h1>

    <button @click=""></button>


    <script src="/js/js/vue.js"></script>
    <script>

        var vm = new Vue({
            el: '#app',
            data: {
                fruits:['苹果','葡萄','李子','草莓','西瓜'],
                heros:[
                    {
                        id:1,
                        ename:'龙龟',
                        cname:'拉克丝'
                    },
                    {
                        id:2,
                        ename:'盖伦',
                        cname:'伊芙琳'
                    },
                    {
                        id:3,
                        ename:'赵信',
                        cname:'提莫'
                    }
                ],
                student:{
                    uname:'zhangsan',
                    age:16,
                    gender:'男'
                },
                seats:[
                    {id:1,row:1,col:1,state:0},
                    {id:2,row:1,col:2,state:0},
                    {id:3,row:1,col:3,state:0},
                    {id:4,row:1,col:4,state:1},
                    {id:5,row:1,col:5,state:1},
                    {id:6,row:1,col:6,state:1},
                ]
            },
            methods: {
            }
        })
    </script>
</body>
</html>